<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .container {
        display: flex;
        justify-content: center;
      }

      .container > li {
        line-height: 30px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 5px 5px;
        cursor: pointer;
        border-radius: 4px;
        user-select: none;
      }

      .container > li.item {
        width: 30px;
      }

      .container > li.btn {
        width: 60px;
      }

      .container > li.item.active,
      .container > li:hover {
        background: rgb(64, 68, 104);
        color: #fff;
        border-color: rgb(64, 68, 104);
      }

      .container > li.btn.disable {
        background: #eee;
        border-color: #eee;
        color: #ccc;
        cursor: not-allowed;
      }
    </style>
  </head>

  <body>
    <ul class="container"></ul>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(() => {
        var pageCount = 5;
        var pageIndex = 1;
        fRender();
        function fRender() {
          $(".container").append(`<li class="first btn pbtn">首页</li>`);
          $(".container").append(`<li class="prev btn pbtn">上一页</li>`);
          for (let i = 1; i <= pageCount; i++) {
            $(".container").append(`<li class="item">${i}</li>`);
            if (i === 1) {
              $(".container li.item").addClass("active");
            }
            render();
          }
          $(".container").append(`<li class="next btn nbtn">下一页</li>`);
          $(".container").append(`<li class="last btn nbtn">尾页</li>`);
        }
        function render() {
          $(".container li.btn").removeClass("disable");
          pageIndex = parseInt($(".container li.item.active").text());
          if (pageIndex === 1) {
            $(".container li.pbtn").addClass("disable");
          } else if (pageIndex === pageCount) {
            $(".container li.nbtn").addClass("disable");
          }
        }
        function renderClass(a) {
          $(".container li.item")
            .eq(a)
            .addClass("active")
            .siblings(".active")
            .removeClass("active");
        }
        $(".container").on("click", "li.item", function() {
          $(this)
            .addClass("active")
            .siblings(".active")
            .removeClass("active");
          render();
        });
        $(".container").on("click", "li.first", function() {
          renderClass(0);
          render();
        });
        $(".container").on("click", "li.last", function() {
          renderClass(pageCount - 1);
          render();
        });
        $(".container").on("click", "li.prev", function() {
          if (pageIndex < 2) return false;
          renderClass(pageIndex - 2);
          render();
        });
        $(".container").on("click", "li.next", function() {
          if (pageIndex > 4) return false;
          renderClass(pageIndex);
          render();
        });
      });
    </script>
  </body>
</html>
